$color: #07c160;
$red: #fe8a8a;
$gray: #ededed;
$yellow: #ff8904;
$dark: #666;
$text: #555;
$text-gray: #ababab;
$bg: #F5F6FA;

:focus-visible {
    outline: none;
}

.cover {
    width: 30px;
    height: 30px;
    display: inline-block;

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.shadow {
    box-shadow: 0 2px 4px rgba(0, 0, 0, .15);
}

@each $d in ("block", "inline", "flex", "inline-block") {
    .#{$d} {
        display: #{$d} !important;
    }
}

@each $f in ("left", "right") {
    .#{$f} {
        float: #{$f} !important;
    }
}

@each $p in (center, right, left) {
    .text-#{$p} {
        text-align: #{$p};
    }
}

.pointer {
    cursor: pointer;
}


@each $c in ("color", "red", "gray", "text-gray", "yellow", "dark", "white") {

    $index: index(("color", "red", "gray", "text-gray", "yellow", "dark", "white"), $c);

    $_c: nth(($color, $red, $gray, $text-gray, $yellow, $dark, "#FFF"), $index);

    .#{$c} {
        color: #{$_c} !important;

        * {
            color: #{$_c} !important;
        }
    }


    .bg-#{$c} {
        background-color: #{$_c} !important;
    }

    .hover-bg-#{$c} {
        &:hover {
            background-color: #{$_c} !important;
            color: #FFF !important;
        }
    }
    .hover-color {
        &:hover {
            color: #{$_c} !important;
        }
    }
}

.normal {

    font-style: normal;
    font-weight: normal;

    b, i {
        font-style: normal;
        font-weight: normal;
    }
}

@keyframes shan {

    0% {
        opacity: 0;
    }

    100% {
        color: $red;
        opacity: 1;
    }
}


.flex {
    display: flex;

    & > * {
        flex: 1;
    }
}


$size: (0, 1, 5, 10, 15, 20, 30);

.box-shadow {
    box-shadow: 0 2px 4px rgba(0, 0, 0, .15);
}

@each $s in (12, 14, 16, 18, 22) {
    .f-#{$s} {
        font-size: #{$s}px !important;
        //line-height: #{$s}px !important;
    }

    .svg-#{$s} {
        fill: currentColor;
        vertical-align: -0.15rem;
        display: inline-block;
        height: #{$s}px;
        width: #{$s}px;
    }
}

@each $s in (1, 5, 15) {
    .bb-#{$s} {
        border-bottom: #{$s}px solid $gray !important;
    }
    .bt-#{$s} {
        border-top: #{$s}px solid $gray !important;
    }

    .btb-#{$s} {
        border-top: #{$s}px solid $gray !important;
        border-bottom: #{$s}px solid $gray !important;
    }

    .bbd-#{$s} {
        border-bottom: #{$s}px dashed $gray !important;
    }
    .btd-#{$s} {
        border-top: #{$s}px dashed $gray !important;
    }

    .btbd-#{$s} {
        border-top: #{$s}px dashed $gray !important;
        border-bottom: #{$s}px dashed $gray !important;
    }
}

@each $s in $size {
    .pd-tb-#{$s} {
        padding-top: #{$s}px !important;
        padding-bottom: #{$s}px !important;
    }

    .mg-tb-#{$s} {
        margin-top: #{$s}px !important;
        margin-bottom: #{$s}px !important;
    }


    .pd-lr-#{$s} {
        padding-left: #{$s}px !important;
        padding-right: #{$s}px !important;
    }

    .mg-lr-#{$s} {
        margin-left: #{$s}px !important;
        margin-right: #{$s}px !important;
    }

    .pd-#{$s} {
        padding: #{$s}px !important;
    }


    .mg-#{$s} {
        margin: #{$s}px !important; 
    }

}


@each $t in ("pd", "mg") {

    $ti: index(("pd", "mg"), $t);

    @each $p in ("t", "b", "l", "r") {

        $i: index(("t", "b", "l", "r"), $p);

        $_PS: nth(("top", "bottom", "left", "right"), $i);

        $tp: nth(("padding", "margin"), $ti);

        @each $s in $size {

            .#{$t}-#{$p}-#{$s} {
                #{$tp}-#{$_PS}: #{$s}px !important;
            }
        }
    }
}


@each $r in (1, 2, 3) {

    .toh-#{$r} {
        overflow: hidden !important;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: #{$r};
        line-clamp: #{$r};
        -webkit-box-orient: vertical
    }
}


@each $s in (5, 10, 15, 20) {
    .radius-#{$s} {
        border-radius: #{$s}px !important;
    }
}


.no-scrollbar {
    &::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

    &::-webkit-scrollbar-track {
        width: 0;
        opacity: 0;
    }
}
body,html{
    @extend .no-scrollbar;
}